<template>
  <el-dialog title="预览文章" :visible="disPreviewlogVisible" @close="close"  width="53%">
      <el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="100px">
       <h2>{{list.title}}</h2>
      <div class="content" style="margin: -5px 0 10px 10px;">
        <span>{{list.createTime}}</span>
        <span style="margin: 0 10px;">{{ list.username }}</span>
        <span>{{list.visits}}</span>
      </div>
      <div v-html="list.articleBody" class="bottom">
      </div>
     </el-form>
    </el-dialog>
</template>

<script>
import { detail } from '@/api/hmmm/articles.js'
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    createTime: {
      type: String,
      required: true
    },
    creator: {
      type: String,
      required: true
    },
    reads: {
      type: Number,
      required: true
    },
    articleBody: {
      type: String,
      required: true
    },
    id: {
      type: String,
      required: true
    },
    model: {
      type: [Object, Array], // 类型
      required: true
    }
  },
  data () {
    return {
      disPreviewlogVisible: false,
      ruleForm: {},
      rules: {},
      list: []
    }
  },
  created () {
    this.init()
  },
  methods: {
    openPreviewDialog (row) {
      this.list = row
      this.disPreviewlogVisible = true
    },
    close () {
      this.disPreviewlogVisible = false
    },
    async init () {
      const res = await detail(this.id)
      console.log(res, 1)
    }
  }

}
</script>

<style scoped lang='less'>
  .bottom{
    border-top: 1px dashed darkgray;
    background-color: #f5f5f5;
    padding: 10px;
    width: 100%;
    // text-align: center;
  }
</style>
